<#-- 活动轨迹分析 -->
<#include "../../common/header.htm">
<div class="content-wrapper">
	<section class="content">
			<div class="bill-right">
				<form id="listForm">
					<div class="box">
						<div class="box-header">
							<div class="row RowSearchWork">
								<div class="col-sm-12">
									<div class="form-group">
				                        <div class="form-inline">
				                            <div class="form-group ml10 form_z">
												<label class="control-label">时间范围</label>
												<div class="input-group">
													<div class="input-icon-group">
														<input type="text" class="form-control fc-clear form_datetime" id="startTime" placeholder="请输入开始日期" />
														<span id="scan" class="glyphicon glyphicon-calendar">
														</span>
													</div>
												</div>
											</div>
											<div class="form-group">
												<label class="control-label refsh">至 </label>
												<div class="input-group">
													<div class="input-icon-group">
														<input type="text" class="form-control fc-clear form_datetime" id="endTime" placeholder="请输入结束日期" />
														<span id="scan" class="glyphicon glyphicon-calendar">
														</span>
													</div>
												</div>
											</div>
				                            <div class="form-group bill-buttonarea" >
												<input type="button" class="btn btn-primary" onclick="queryList();" value="分析" />
												<input type="button" class="btn btn-default" onclick="reset();" value="重置" />
												<input type="button" class="btn btn-primary daobtn" onclick="exportList();" value="导出" />
											</div>
				                        </div>
			                        </div>
								</div>
							</div>
						</div>
						<div class="box-body">
	                        <div>
								<table id="table"></table>
	                        </div>
						</div>
					</div>
				</form>
		</div>
	</section>
</div>
<script type="text/javascript">
	var caseId=parent.caseId;
		 $(window).resize(function(){
			$('#table').datagrid('resize',{
                height:($(window).height())-($('.box-header').outerHeight(true))-20,
			});
		});
    function mapDialog(serviceNumber) {
        let startTime = $.trim($("#startTime").val());
        let endTime = $.trim($("#endTime").val());
        var param = {
            begin_time:startTime,
            end_time:endTime,
            SERVICE_NUMBER : "'"+serviceNumber+"'",
            CASEMANAGE_ID:caseId
        };
        if(parent.parent._checkedPhone.length>=1000){
            param.cardList="-1";//默认超过1000个节点为全选，不需要去后台传数据
        };
        var d = top.dialog({
            title : '活动轨迹分析图',
            modal : true,
            url : '${ctx}/phoneAddress/trackmapDialog',
            height : 800,
            width : 1500,
            data : param,
            onshow : function () {
            }
        });
        d.show();
        return false;
    }
    function detailDialog(serviceNumber) {
        let startTime = $.trim($("#startTime").val());
        let endTime = $.trim($("#endTime").val());
        var param = {
            startTime:startTime,
            endTime:endTime,
            checkedPhone : parent.parent._checkedPhone.join(','),
            serviceNumber: serviceNumber,
            caseId:caseId
        };
        if(parent.parent._checkedPhone.length>=1000){
            param.cardList="-1";//默认超过1000个节点为全选，不需要去后台传数据
        };
        var d = top.dialog({
            title : '活动轨迹分析详情',
            modal : true,
            url : '${ctx}/phoneAddress/trackdetailDialog',
            height : 800,
            width : 1500,
            data : param,
            onshow : function () {
            }
        });
        d.show();
        return false;
    }
	$(".form_datetime").datepicker({
	    format: "yyyy-mm-dd",
	    autoclose: true,
	    language:'zh-CN',
	    pickerPosition:"bottom-left"
	});
	 function chickShowType(value){
		 $("#showType").val(value);
		 $("#table").bootstrapTable('refresh',{
			 pageNumber : 1
		 });
	 };
	 new Vue({
		   el:".box-body",
		   data:{
			   showType:0
		   }
	 });
	 //window.onload = first;
	 function first() {
         let startTime = $.trim($("#startTime").val());
         let endTime = $.trim($("#endTime").val());
         let showType = $.trim($("#showType").val());
         $('#table').datagrid({
             url: '${ctx}/track/trackEvents',
             // fitColumns:true,
             queryParams: {
                 startTime : startTime,
                 endTime : endTime,
                 caseId:caseId,
                 checkedPhone :cards.join(','),
                 showType : 0,
             },
			 height:($(window).height())-($('.box-header').outerHeight(true))-20,
             pageNumber:1,
             pageSize:30,
             singleSelect: true,
             pageList:[30,50,100,150,200],
             pagination:true,
             rownumbers: true,//行号
             columns: [[
                 {
                     field: 'serviceNumber',//域值
                     title: '主叫号码',//标题
                     sortable: false,//启用排序
                 },
                 {
                     field: 'startTime',//域值
                     title: '开始日期',//标题
                     sortable: false,//启用排序
                 },
                 {
                     field: 'endTime',//域值
                     title: '结束日期',//内容
                 },
                 {
                     field: 'callNum',//域值
                     title: '通话次数',//内容
                     sortable: true,//启用排序
                     formatter: function(value, row, index){
                         var html='<a href="javascript:void(0)" title="单机打开通话详情" onclick="detailDialog(\''+row.serviceNumber+'\')">'+value+'</a>'
                         return html;
                     }
                 },
                 {
                     field: 'stationNum',//域值
                     title: '基站数量',//内容
                 },
                 {
                     title: '轨迹',//内容
                     field: 'stum',//域值
                     formatter: function(value, row, index){
                         var html='<i class="map" onclick="mapDialog(\''+row.serviceNumber+'\')"></i>'
                         return html;
                     }
                 },
             ]],
             onLoadSuccess:function (result) {
                 /*if (result.map)
                     initMap("hidebox-mContent",result.map);*/
             }
         });
     }
	 
	 /*bootstrap table*/
	 function queryList(){
		 // cards=parent.parent._checkedPhone.join('\',\'');
         cards = new Array();
         $.each(parent.parent._checkedPhone,function (i,n) {
             cards[i] ="'"+ n.split("_")[0]+"'";
         });

		 first();
	 };
	_checkedCallback()
	var cards = new Array();
    function _checkedCallback(){
		// cards=parent.parent._checkedPhone.toString();
        cards = new Array();
        $.each(parent.parent._checkedPhone,function (i,n) {
            cards[i] ="'"+ n.split("_")[0]+"'";
        });

        queryList();
    }
	 /* 详情跳转 */
	 function trackDetail(serviceNumber){
		 parent.base.getView({
			url:"${ctx}/track/trackDetailsGO?serviceNumber="+serviceNumber+"&caseId="+caseId,
			success:function(result){
				bootbox.dialog({
					message:result,
					size:"large",
					boxCss:{"width":"1270px"},
					closeButton : true
				})
			}
		});
	 };
	 
	 function reset(){
		 $("#starTime").val('');
		 $("#endTime").val('');
	 };
	//地图弹窗
     function showMap(serviceNumber){
         $("#hidebg-map").show();
         $("#hidebox-map").show();
         $.ajax({
             url: '${ctx}/callanalysis/detail/1/10',
			 type:'post',
             data: {CASEMANAGE_ID:caseId,SERVICE_NUMBER:serviceNumber},
             success:function (result) {
                 console.log(result)
                 this.tableData=result.data.data.rows;
                 this.total=result.data.data.total;
                 if(result.data.data.allRows&&result.data.data.allRows.code==20000){
                     // initMap("call_detail_map",result.data.data.allRows)
                     initMap("hidebox-mContent",result.data.data.allRows)
                 }else{
                     // initMap("call_detail_map",{})
                     initMap("hidebox-mContent",{})
                 }
             }
		 })
     }
     function hideMap(){
         $("#hidebg-map").hide();
         $("#hidebox-map").hide();
     }
	 function exportList(){
		var startTime = $("#startTime").val();
		var endTime = $("#endTime").val();
		var checkedPhone = parent.parent._checkedPhone.join(',');
		var url = "${ctx}/track/exportTrackEvents";
		var form = $("<form></form>").attr("action", url).attr("method", "post");
		form.append($("<input></input>").attr("type", "hidden").attr("name", "startTime").attr("value", startTime));
		form.append($("<input></input>").attr("type", "hidden").attr("name", "endTime").attr("value", endTime));
		form.append($("<input></input>").attr("type", "hidden").attr("name", "checkedPhone").attr("value", checkedPhone));
		form.append($("<input></input>").attr("type", "hidden").attr("name", "caseId").attr("value", caseId));
		form.appendTo('body').submit().remove();
	 };
</script>
<style>
	input#startTime{
		width: 120px;
		height: 30px;
	}
	input#endTime{
		width: 120px;
	}
	#hidebg {
            position:absolute;
            left:0px;
            top:0px;
            background-color:#000;
            width: 100%;
            height: 100%;
            filter:alpha(opacity=60);  /*设置透明度为60%*/
            opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
            display:none;
            z-Index:999;
        }
        #hidebox {
            text-align: right;
            position:absolute;
            width: 96%;
            height: 82%;
            top: 23px;
            left: 2%;
            border-radius: 5px;
            background-color:#fff;
            display:none;
            z-Index:9999;
            padding: 10px;
        }
        #hidebg-map {
            position:absolute;
            left:0px;
            top:0px;
            background-color:#000;
            width: 100%;
            height: 100%;
            filter:alpha(opacity=60);  /*设置透明度为60%*/
            opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
            display:none;
            z-Index:999;
        }
        #hidebox-map {
            text-align: right;
            position:absolute;
            width: 96%;
            height: 90%;
            top: 23px;
            left: 2%;
            border-radius: 5px;
            background-color:#fff;
            display:none;
            z-Index:9999;
            padding: 10px;
        }
        div#hidebox-mContent {
            width: 100%;
            height: 96%;
        }
        .outAccount_d3_head {
            float: left;
            font-size: 20px;
            margin-bottom: 5px;
        }
        #hidebox-map span{
            font-size: 20px;
        }
        svg {
            height: 96%;
            width: 100%;
        }
	.map{
		background: url(${ctx}/imgs/icon-map.png);
	    width: 20px;
	    height: 20px;
	    display: block;
	}
	.box-header .form-group{
		margin-right: 11px;
	}
	.input-group .form-control:first-child{
		border-radius: 0;
		border-top-right-radius: 0!important;
		border-bottom-right-radius: 0!important;
	}
	.form-group.form-z {
		margin-right: 0px !important;
	}
	.control-label{
		font-size: 13px;
		font-weight: 400;
	}
	.bill-buttonarea .btn{
		margin-right: 12px;
		width: 70px;
	}
	.btn-primary:active:focus{
		background-color: #4695ed;
		border-color: #4695ed;
	}
	.box-body{
		margin-top:0;
	}
	.box-body .title{
		font-size:14px;
		font-weight:800;
		line-height:30px;
	}
	.box-body .casemanage-switch{
		margin:0;
	}
	.box{
		padding: 0;
		margin-bottom: -10px;
	}
	.btn-primary{
		background-color:#4695ed;
		border-color:#4695ed;
	}
	.btn-primary:hover, .btn-primary:active, .btn-primary.hover{
		background-color:#61a8f5;
		border-color:#61a8f5;
	}
	.btn-primary.focus, .btn-primary:focus{
		background-color:#4695ed;
		border-color:#4695ed;
	}
	.casemanage-switch .casemanage-list{
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}
	.form-control{
		border-radius:4px;
		font-size: 12px;
		border-color: #e4e4e4;
	}
	.input-group .form-control:first-child{
		border-top-right-radius:4px;
		border-bottom-right-radius: 4px;
	}
	.form-control:focus{
		border-color:#4695ed;
	}
	.form-control:hover{
		border-color:#4695ed;
	}
	.content{padding:10px;}
</style>
